<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			* {
				/*去除移动端特有的点击高亮*/
				-webkit-tap-highlight-color: transparent;
			}
			
			li {
				background-color: blue;
				margin-bottom: 10px;
				height: 30px;
				cursor: pointer;
			}
			
			li:nth-of-type(2n) {
				background-color: red;
			}
			
			li:first-of-type {
				background-color: green
			}
			
			li:last-of-type {
				background-color: yellow
			}
			
			a {
				display: block;
				margin-top: 20px;
			}
		</style>
	</head>

	<body>
		<ul>
			<li class="green"></li>
			<li class="red"></li>
			<li onclick=""></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li onclick="alert('点到了一个')"></li>
		</ul>
		<a href="javascript:;">点到了a</a>
		<script type="text/javascript">
//			事件委托
//			window.onload = function() {
//				document.addEventListener('click', doThing);
//			};
//
//			function doThing(e) {
//				var target = e.target;
//				if(target.localName === 'html') {
//					return false;
//				}
//				alert(e.type)
//				if(target.classList.contains('green')) {
//					alert('我点到了绿色！');
//				} else if(target.classList.contains('red')) {
//					alert('我点到了红色！');
//				} else if(target.localName === 'li') {
//					alert('我点到了除绿和红以外的li');
//				} else if(target.localName === 'ul') {
//					alert('点到了ul');
//				} else if(target.localName === 'a') {
//					alert('点到了a');
//				}
//			}
//			遍历原始事件流模型
//			var lis=document.querySelectorAll("li");
//			for (var i=0;i<lis.length;i++) {
//				lis[i].onclick=function () {
//					alert('遍历原始事件模型点到了li');
//				};
//			}
//			遍历dom2事件模型
//			var lis=document.querySelectorAll("li");
//			for (var i=0;i<lis.length;i++) {
//				lis[i].addEventListener('click',function () {
//					alert('遍历dom2事件模型点到了li');
//				},false);
//			}
		</script>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
//			$('li').click(function () {
//				alert('jq点到了li');
//			});
//$('li').on('click',function () {
//	alert('jq on 点到了li');
//});
			$(document).on('click','li',function () {
				alert('jq 事件代理点到了li');
			});
		</script>
	</body>

</html>